<template>
	<Teleport to="body">
		<nut-popup v-model:visible="visible" :close-on-click-overlay="false" :z-index="zIndex" customClass="custom-popup" pop-class="popup-com">
			<div class="popup-header" @click="visible = false">
				<span>{{ title }}</span>
				<iconpark-icon class="close-icon" icon-id="close" size="1.2rem"></iconpark-icon>
			</div>
			<div class="popup-content" :style="contentStyle">
				<slot></slot>
			</div>
		</nut-popup>

	</Teleport>
</template>

<script setup lang="ts">
const visible = defineModel<boolean>('visible', { required: false });
defineProps({
	zIndex: {
		type: Number,
		default: 1000,
	},
	title: {
		type: String,
		default: '',
	},
	contentStyle: {
		type: String,
		default: '',
	},
});
</script>


<style scoped>
.popup-header {
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 16px;
	height: 48px;
	font-weight: 600;
	color: #fff;
	border-bottom: 0.5px solid #242352;
	position: relative;
	.close-icon {
		position: absolute;
		right: 20px;
		top: 50%;
		transform: translateY(-50%);
	}
}

.popup-content {
	min-height: 150px;
	padding: 0 14px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-family: 'PingFang SC';
	font-size: 14px;
	font-style: normal;
	font-weight: 500;
	line-height: 14px; /* 100% */
}

.popup-footer {
	display: flex;
	justify-content: space-between;
	margin-top: 20px;
}
</style>
